<template>
  <div class="step-panel">
    <div class="title"> 认证成功</div>
    <StepProgress :steps="['填写身份证', '录制视频', '验证结果']" :current="2" />
    <div class="result-area">
      <svg width="80" height="80" viewBox="0 0 80 80">
        <circle cx="40" cy="40" r="38" fill="none" stroke="#4CAF50" stroke-width="4"/>
        <polyline points="25,43 37,55 56,30" fill="none" stroke="#4CAF50" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <div class="success-title">认证成功</div>
      <div class="success-desc">您已完成实名认证</div>
    </div>
    <button class="back-btn" @click="goBack">返回控制台</button>
  </div>
</template>

<script setup>
import StepProgress from './StepProgress.vue'
import request from '@/utils/request'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps(['userId', 'idFrontUrl', 'idBackUrl', 'name', 'id', 'videoBlob'])
const result = ref(null)
const router = useRouter()

onMounted(async () => {
  const formData = new FormData()
  formData.append('user_id', props.userId)
  formData.append('id_card_front_url', props.idFrontUrl)
  formData.append('id_card_back_url', props.idBackUrl)
  // 如需上传视频，可加上
  // formData.append('video', props.videoBlob)
  const res = await request.post('user/real-name-verification/', formData)
  result.value = res.data
})

function goBack() {
  router.push('/home')
}
</script>

<style scoped>
.title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 18px;
  color: #666;
}
.result-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 32px 0 18px 0;
}
.success-title {
  font-size: 28px;
  color: #4CAF50;
  font-weight: bold;
  margin: 18px 0 10px 0;
}
.success-desc {
  font-size: 17px;
  color: #888;
  margin-bottom: 18px;
}
.back-btn {
  width: 100%;
  background: #3498db;
  color: #fff;
  border: none;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.back-btn:hover {
  background: #217dbb;
}
</style> 